import 'package:date_format/date_format.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/constants/zt_dart.dart';
import 'package:zootix/screens/mine/zt_userinfo.controller.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/widgets/zt_my_avatar.dart';

class ZtUserInfoPage extends StatelessWidget {
  final _controller = Get.put<ZtUserInfoController>(ZtUserInfoController());
  ZtUserInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
          elevation: 0,
          actions: [
            TextButton(
                onPressed: () {
                  _controller.saveUserInfo();
                },
                child: Text(
                  'Save',
                  style: TextStyle(
                      color: const Color(0xFFB0F320),
                      fontSize: ZtScreenAdaper.sp(18)),
                )),
            SizedBox(
              width: ZtScreenAdaper.width(5),
            )
          ],
          backgroundColor: Colors.transparent),
      body: _buildBody(),
    ));
  }

  Widget _buildBody() {
    return Column(
      children: [
        SizedBox(
          height: ZtScreenAdaper.height(50),
        ),
        Center(
          child: ZtMyAvatarWidget(),
        ),
        TextFormField(
          controller: _controller.nickNameController,
          cursorColor: const Color.fromARGB(255, 87, 86, 86),
          style:
              TextStyle(fontSize: ZtScreenAdaper.sp(18), color: Colors.black),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(
                ZtScreenAdaper.width(12), 0, ZtScreenAdaper.width(12), 0),
            labelText: "Nick Name",
            labelStyle: TextStyle(
                color: const Color.fromARGB(255, 136, 136, 136),
                fontSize: ZtScreenAdaper.sp(18)),
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color.fromARGB(153, 191, 190, 190),
              ),
            ),
            focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color.fromARGB(153, 191, 190, 190),
              ),
            ),
          ),
        ),
        SizedBox(
          height: ZtScreenAdaper.height(15),
        ),
        TextFormField(
            controller: _controller.birthdayController,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(
                  ZtScreenAdaper.width(12), 0, ZtScreenAdaper.width(12), 0),
              labelText: "Date of birth",
              labelStyle: TextStyle(
                  color: const Color.fromARGB(255, 136, 136, 136),
                  fontSize: ZtScreenAdaper.sp(18)),
              enabledBorder: const UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Color.fromARGB(153, 191, 190, 190),
                ),
              ),
              focusedBorder: const UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Color.fromARGB(153, 191, 190, 190),
                ),
              ),
            ),
            onTap: () async {
              await showCupertinoModalPopup(
                  context: Get.context!,
                  builder: (context) => Container(
                        color: Colors.white,
                        height: 300,
                        child: CupertinoDatePicker(
                            initialDateTime: DateTime.parse(
                                _controller.birthdayController.text),
                            minimumDate: DateTime(1900),
                            maximumDate: DateTime.now()
                                .subtract(const Duration(days: 18 * 365)),
                            minimumYear: DateTime(1900).year,
                            maximumYear: DateTime.now()
                                .subtract(const Duration(days: 18 * 365))
                                .year,
                            mode: CupertinoDatePickerMode.date,
                            onDateTimeChanged: (pickeddate) {
                              _controller.birthdayController.text =
                                  formatDate(pickeddate, [
                                yyyy,
                                '-',
                                mm,
                                '-',
                                dd,
                              ]);
                            }),
                      ));
            },
            style:
                TextStyle(fontSize: ZtScreenAdaper.sp(18), color: Colors.black),
            cursorColor: const Color.fromARGB(255, 87, 86, 86)),
        SizedBox(
          height: ZtScreenAdaper.height(15),
        ),
        TextFormField(
            controller: _controller.countryController,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(
                  ZtScreenAdaper.width(12), 0, ZtScreenAdaper.width(12), 0),
              labelText: "Country",
              labelStyle: TextStyle(
                  color: const Color.fromARGB(255, 136, 136, 136),
                  fontSize: ZtScreenAdaper.sp(18)),
              enabledBorder: const UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Color.fromARGB(153, 191, 190, 190),
                ),
              ),
              focusedBorder: const UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Color.fromARGB(153, 191, 190, 190),
                ),
              ),
            ),
            onTap: () async {
              await showCupertinoModalPopup(
                  context: Get.context!,
                  builder: (context) => Container(
                      color: Colors.white,
                      height: 300,
                      child: CupertinoPicker(
                        itemExtent: 50,
                        onSelectedItemChanged: (index) {
                          _controller.countryController.text =
                              ZtData.countryCodes[index];
                        },
                        children: ZtData.countryCodes
                            .map((e) => Container(
                                  height: ZtScreenAdaper.height(50),
                                  alignment: Alignment.center,
                                  child: Text(
                                    e,
                                    style: TextStyle(
                                        fontSize: ZtScreenAdaper.sp(30)),
                                  ),
                                ))
                            .toList(),
                      )));
            },
            style:
                TextStyle(fontSize: ZtScreenAdaper.sp(18), color: Colors.black),
            cursorColor: const Color.fromARGB(255, 87, 86, 86))
      ],
    );
  }
}
